import React,  { memo } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import { SongListWrapper, NavWrapper, ListWrapper } from './style'
import { formatDuration } from '@/utils/format'
import usePlayMusic from '@/hooks/usePlayMusic'
import useShowDetail from '@/hooks/useShowDetail'
export default memo(function SongList() {
  const { playlistDetail } = useSelector(state => ({
    playlistDetail: state.getIn(['playlist','playlistDetail'])
  }), shallowEqual)
  const tracks = playlistDetail.tracks || []
  const playMusic = usePlayMusic()
  const goToSongDetail = useShowDetail()
  return (
    <SongListWrapper>
      <NavWrapper>
      <div className='title'>歌曲列表</div>
        <div className='count'>{playlistDetail.trackCount}首歌</div>
        <div className='play'><span>播放：</span><span className='playcount'>{playlistDetail.playCount}</span>次</div>
      </NavWrapper>
      <ListWrapper>
        <table>
          <thead>
            <tr className="header">
              <th className="ranking"></th>
              <th className="title">歌曲标题</th>
              <th className="duration">时长</th>
              <th className="singer">歌手</th>
              <th className="album text-nowrap">专辑</th>
            </tr>
          </thead>
          <tbody>
            {
              tracks.map((item, index) => {
                return (
                  <tr key={item.id}>
                    <td>
                      <div className="rank-num">
                        <span className="num">{index + 1}</span>
                        <span className="play sprite_table" onClick={e => playMusic(item.id)}></span>
                      </div>
                    </td>
                    <td>
                      <div className="song-name">
                        <span className="name" onClick={e => goToSongDetail(item.id)}>{item.name}</span>
                      </div>
                    </td>
                    <td className='dt'>
                      <span className='dt_content'>{formatDuration(item.dt)}</span>
                      <div className="operate">
                        <button className="btn sprite_02 play" onClick={e => playMusic(item.id)}></button>
                        <button className="btn sprite_icon2 addto"></button>
                        <button className="btn sprite_02 favor"></button>
                      </div>
                    </td>
                    <td>{item.ar[0].name}</td>
                    <td className='text-nowrap'>{item.al.name}</td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </ListWrapper>
    </SongListWrapper>
  )
})
